<template>
  <div class="container">
    <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
      <el-tab-pane label="排列三一号表" name="first">
        <table class="table" border="1">
          <tr>
            <td class="title">分析结果</td>
            <td class="content">
              <div class="content_title">
                <span>3.分析结果</span>
              </div>
              <div class="header_content">
                <ul>
                  <li v-for="(item,index) in list" :key="index">
                    <div>{{item}}</div>
                  </li>
                </ul>
              </div>
            </td>
          </tr>
          <tr>
            <td class="title">表格公式</td>
            <td class="content2">
              <el-table :data="dataList" style="width: 820px;height: 100%;" max-height="500">
                <el-table-column label="4.表格公式" header-align="left">
                  <el-table-column prop="ticket" :label="item.name+' '+item.desc" v-if="item.name == '数值'" v-for="(item,index) in headerList"
                    :key='index' header-align="center" align="center" width="140" :render-header="renderHeader">
                  </el-table-column>
                  <el-table-column prop="m" :label="item.name+' '+item.desc" v-if="item.name == '和值'" v-for="(item,index) in headerList"
                    :key='index' header-align="center" align="center" width="140" :render-header="renderHeader">
                  </el-table-column>
                  <el-table-column prop="m1" :label="item.name+' '+item.desc" v-if="item.name == 'M1'" v-for="(item,index) in headerList"
                    :key='index' header-align="center" align="center" width="140" :render-header="renderHeader">
                  </el-table-column>
                  <el-table-column prop="m2" :label="item.name+' '+item.desc" v-if="item.name == 'M2'" v-for="(item,index) in headerList"
                    :key='index' header-align="center" align="center" width="140" :render-header="renderHeader">
                  </el-table-column>
                  <el-table-column prop="m3" :label="item.name+' '+item.desc" v-if="item.name == 'M3'" v-for="(item,index) in headerList"
                    :key='index' header-align="center" align="center" width="140" :render-header="renderHeader">
                  </el-table-column>
                  <el-table-column prop="ticketSorted" :label="item.name+' '+item.desc" v-if="item.name == '转换成组合数'"
                    v-for="(item,index) in headerList" :key='index' header-align="center" align="center" width="140"
                    :render-header="renderHeader">
                  </el-table-column>
                  <el-table-column prop="m4" :label="item.name+' '+item.desc" v-if="item.name == 'M4'" v-for="(item,index) in headerList"
                    :key='index' header-align="center" align="center" width="140" :render-header="renderHeader">
                  </el-table-column>
                  <el-table-column prop="m5" :label="item.name+' '+item.desc" v-if="item.name == 'M5'" v-for="(item,index) in headerList"
                    :key='index' header-align="center" align="center" width="140" :render-header="renderHeader">
                  </el-table-column>
                  <el-table-column prop="m6" :label="item.name+' '+item.desc" v-if="item.name == '组合跨度值'" v-for="(item,index) in headerList"
                    :key='index' header-align="center" align="center" width="140" :render-header="renderHeader">
                  </el-table-column>
                  <el-table-column prop="jo" :label="item.name+' '+item.desc" v-if="item.name == '奇偶值'" v-for="(item,index) in headerList"
                    :key='index' header-align="center" align="center" width="140" :render-header="renderHeader">
                  </el-table-column>
                  <el-table-column prop="m7" :label="item.name+' '+item.desc" v-if="item.name == '奇偶和值'" v-for="(item,index) in headerList"
                    :key='index' header-align="center" align="center" width="140" :render-header="renderHeader">
                  </el-table-column>

                </el-table-column>
              </el-table>

            </td>
          </tr>
        </table>

        <!-- 底部按钮 -->
        <div class="bottom">
          <el-button type="primary" @click="goBack">上一步</el-button>
          <el-button type="primary" @click="goNext">下一步</el-button>
        </div>

      </el-tab-pane>
      <el-tab-pane label="排列三二号表" name="second">

        <table class="table" border="1">
          <tr>
            <td class="title">分析结果</td>
            <td class="content">
              <div class="content_title">
                <span>3.分析结果</span>
              </div>
              <div class="header_content">
                <ul>
                  <li v-for="(item,index) in list" :key="index">
                    <div>{{item}}</div>
                  </li>
                </ul>
              </div>

            </td>
          </tr>
          <tr>
            <td class="title">表格公式</td>
            <td class="content2">
              <el-table :data="dataList" style="width: 820px;height: 100%;" max-height="500">
                <el-table-column label="4.表格公式" header-align="left">
                  <el-table-column prop="ticket" :label="item.name+' '+item.desc" v-if="item.name == '数值'" v-for="(item,index) in headerList"
                    :key='index' header-align="center" align="center" width="140" :render-header="renderHeader">
                  </el-table-column>
                  <el-table-column prop="ticketSorted" :label="item.name+' '+item.desc" v-if="item.name == '转换成组合数'"
                    v-for="(item,index) in headerList" :key='index' header-align="center" align="center" width="140"
                    :render-header="renderHeader">
                  </el-table-column>
                  <el-table-column prop="m" :label="item.name+' '+item.desc" v-if="item.name == '和值'" v-for="(item,index) in headerList"
                    :key='index' header-align="center" align="center" width="140" :render-header="renderHeader">
                  </el-table-column>
                  <el-table-column prop="m1" :label="item.name+' '+item.desc" v-if="item.name == 'M1'" v-for="(item,index) in headerList"
                    :key='index' header-align="center" align="center" width="140" :render-header="renderHeader">
                  </el-table-column>
                  <el-table-column prop="m2" :label="item.name+' '+item.desc" v-if="item.name == 'M2'" v-for="(item,index) in headerList"
                    :key='index' header-align="center" align="center" width="140" :render-header="renderHeader">
                  </el-table-column>
                  <el-table-column prop="m3" :label="item.name+' '+item.desc" v-if="item.name == 'M3'" v-for="(item,index) in headerList"
                    :key='index' header-align="center" align="center" width="140" :render-header="renderHeader">
                  </el-table-column>
                  <el-table-column prop="m6" :label="item.name+' '+item.desc" v-if="item.name == '组合跨度值'" v-for="(item,index) in headerList"
                    :key='index' header-align="center" align="center" width="140" :render-header="renderHeader">
                  </el-table-column>
                  <el-table-column prop="d1" :label="item.name+' '+item.desc" v-if="item.name == 'D1'" v-for="(item,index) in headerList"
                    :key='index' header-align="center" align="center" width="140" :render-header="renderHeader">
                  </el-table-column>
                  <el-table-column prop="d2" :label="item.name+' '+item.desc" v-if="item.name == 'D2'" v-for="(item,index) in headerList"
                    :key='index' header-align="center" align="center" width="140" :render-header="renderHeader">
                  </el-table-column>
                  <el-table-column prop="d3" :label="item.name+' '+item.desc" v-if="item.name == 'D3'" v-for="(item,index) in headerList"
                    :key='index' header-align="center" align="center" width="140" :render-header="renderHeader">
                  </el-table-column>
                  <el-table-column prop="d4" :label="item.name+' '+item.desc" v-if="item.name == 'D4'" v-for="(item,index) in headerList"
                    :key='index' header-align="center" align="center" width="140" :render-header="renderHeader">
                  </el-table-column>
                  <el-table-column prop="e" :label="item.name+' '+item.desc" v-if="item.name == '将D1、D2、D3、D4从小到大排列'"
                    v-for="(item,index) in headerList" :key='index' header-align="center" align="center" width="140"
                    :render-header="renderHeader">
                  </el-table-column>
                  <el-table-column prop="f1" :label="item.name+' '+item.desc" v-if="item.name == 'F1'" v-for="(item,index) in headerList"
                    :key='index' header-align="center" align="center" width="140" :render-header="renderHeader">
                  </el-table-column>
                  <el-table-column prop="f2" :label="item.name+' '+item.desc" v-if="item.name == 'F2'" v-for="(item,index) in headerList"
                    :key='index' header-align="center" align="center" width="140" :render-header="renderHeader">
                  </el-table-column>
                  <el-table-column prop="f3" :label="item.name+' '+item.desc" v-if="item.name == 'F3'" v-for="(item,index) in headerList"
                    :key='index' header-align="center" align="center" width="140" :render-header="renderHeader">
                  </el-table-column>
              
            
                  <el-table-column prop="jo" :label="item.name+' '+item.desc" v-if="item.name == '奇偶值'" v-for="(item,index) in headerList"
                    :key='index' header-align="center" align="center" width="140" :render-header="renderHeader">
                  </el-table-column>
                  <el-table-column prop="b" :label="item.name+' '+item.desc" v-if="item.name == '奇偶和值'" v-for="(item,index) in headerList"
                    :key='index' header-align="center" align="center" width="140" :render-header="renderHeader">
                  </el-table-column>


                </el-table-column>
              </el-table>

            </td>
          </tr>
        </table>

        <!-- 底部按钮 -->
        <div class="bottom">
          <el-button type="primary" @click="goBack">上一步</el-button>
          <el-button type="primary" @click="goNext">下一步</el-button>
        </div>

      </el-tab-pane>
    </el-tabs>
  </div>

</template>

<script>
  export default {
    name: 'rankThreeAnalysis',
    data() {
      return {
        activeName: 'first',
        position: 'left',
        headerList: [],
        dataList: [], //表格公式数据
        list: [], // 分析结果数据
        type: 0,
        form: {
          type: [],
        }
      };
    },
    created() {

      var activeName = this.$route.query.activeName;
      var type = this.$route.query.type;
      this.activeName = activeName;
      this.type = type;
      this.loadData();
    },

    methods: {
      handleClick(tab, event) {
        this.activeName = tab.name;
        this.headerList = [];
        this.dataList = [];
        this.loadData();
      },

      loadData() {

        if (this.activeName == 'first') {
          if (this.type == 1) {
            var dataJson = window.localStorage.getItem("dwjoForwardList");
            this.list = eval(dataJson);
            this.getFormula(this.list)
          } else if (this.type == 2) {
            var dataJson = window.localStorage.getItem("dwjoMiddleList");
            this.list = eval(dataJson);
            this.getFormula(this.list)
          } else {
            var dataJson = window.localStorage.getItem("dwjoList");
            this.list = eval(dataJson);
            this.getFormula(this.list)
          }
        } else {
          if (this.type == 1) {
            var dataJson = window.localStorage.getItem("dwjoForwardList2");
            this.list = eval(dataJson);
            this.getFormulaTwo(this.list)
          } else if (this.type == 2) {
            var dataJson = window.localStorage.getItem("dwjoMiddleList2");
            this.list = eval(dataJson);
            this.getFormulaTwo(this.list)
          } else {
            var dataJson = window.localStorage.getItem("dwjoList2");
            this.list = eval(dataJson);
            this.getFormulaTwo(this.list)
          }

        }

      },


      // 表格公式显示两行
      renderHeader(h, {
        column
      }) {
        let header = column.label.split(' ');
        return [h('p', [
          h('p', {}, header[0]),
          h('span', {}, header[1])
        ])];
      },


      //查询表格公式一
      async getFormula(list) {
        const res = await this.$http.post("/api/calc/formula", {
          list: JSON.stringify(list)
        })
        console.log(res.data.data);
        if (res.data.code == 200) {
          this.headerList = res.data.data.header;
          this.dataList = res.data.data.data;
          if (this.type == 1) {
            window.localStorage.setItem("formulaForwardList", JSON.stringify(res.data.data.data));
          } else if (this.type == 2) {
            window.localStorage.setItem("formulaMiddleList", JSON.stringify(res.data.data.data));
          } else {
            window.localStorage.setItem("formulaList", JSON.stringify(res.data.data.data));
          }
        } else {
          this.$message.error(res.data.msg);
        }
      },

      //查询表格公式二
      async getFormulaTwo(list) {
        const res = await this.$http.post("/api/calc/formulaTwo", {
          list: JSON.stringify(list)
        })
        console.log(res.data.data);
        if (res.data.code == 200) {
          this.headerList = res.data.data.header;
          this.dataList = res.data.data.data;
          for (var index in this.dataList) {
            var eArr = new Array;
            var item = this.dataList[index];
            eArr.push(item.eArr["0"])
            eArr.push(item.eArr["1"])
            eArr.push(item.eArr["2"])
            eArr.push(item.eArr["3"])
            eArr.push(item.eArr["4"])
            var e=  eArr.join('')
            this.$set(item,'e',e)
          }
          if (this.type == 1) {
            window.localStorage.setItem("formulaForwardList2", JSON.stringify(res.data.data.data));
          } else if (this.type == 2) {
            window.localStorage.setItem("formulaMiddleList2", JSON.stringify(res.data.data.data));
          } else {
            window.localStorage.setItem("formulaList2", JSON.stringify(res.data.data.data));
          }
        } else {
          this.$message.error(res.data.msg);
        }
      },


      // 点击上一页
      goBack() {
        this.$router.back();
      },
      // 点击下一页
      goNext() {
        this.$router.push({
          path: '/home/rankThreeScreening',
          query: {
            activeName: this.activeName,
            type: this.type,
          }
        })
      }
    }
  }
</script>

<style scoped="scoped">
  .container {
    height: 100%;
  }

  .table {
    width: 100%;
    height: 500px;
    border-color: #2676C2;
    border-collapse: collapse;
  }

  .title {
    width: 140px;
    color: #2676C2;
    text-align: center;
  }

  .content {
    height: 180px;
    margin: 0px;
    padding: 0px;
  }

  .content_title {
    width: 100%;
    height: 50px;
    line-height: 50px;
    margin-left: 20px;
  }

  .header_content {
    /* width: 100%; */
    height: 130px;
    /* padding: 20px 10px; */
    display: inline-block;

  }

  /* .content2 {
    width: 500px;
  }
 */

  ul {
    overflow: hidden;
    /* width: 100%; */
    /* margin-bottom: -10px; */
    margin-top: 0;
    /* background: red; */
    /* height: 100%; */

  }

  li {
    list-style: none;
    float: left;
    width: 60px;
    /*可以用百分比*/
    height: 20px;
    /*可以用百分比*/
    margin-bottom: 10px;
    /* border: 1px solid red; */
  }

  li>div {
    background: #eee;
    margin: 0 10px;
    border-radius: 4px;
    text-align: center;
    line-height: 20px;
    color: #2676C2;
    border: 1px solid #999999;

  }
</style>
